<template>
  <div class="login-container">
    <el-form autoComplete="off" auto-complete="off" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px" class="card-box login-form">
      <h3 class="title">登入后台管理平台</h3>
      <el-form-item prop="username">
        <span class="svg-container svg-container_login">
          <svg-icon icon-class="user" />
        </span>
        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="off" auto-complete="off" placeholder="机构账号" />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password"></svg-icon>
        </span>
        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="off" auto-complete="off" placeholder="登录密码"></el-input>
        <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%;height: 42px;" :loading="loading" @click.native.prevent="handleLogin">
          登录
        </el-button>
      </el-form-item>
      <div class="tips">
        <span style="margin-right:20px;">如果有账号问题，请联系客服咨询</span>
        <span class="phone"> 400-921-6118</span>
      </div>
    </el-form>
    <div id="large-header" class="large-header">
      <canvas id="demo-canvas"></canvas>
    </div>
  </div>
</template>
<script>
// import '@/styles/demo.css'
import '@/styles/component.css'
import { isvalidUsername } from '@/utils/validate'
// import { TweenLite } from '@/utils/TweenLite.min'
function rAF() {
  var lastTime = 0
  var vendors = ['ms', 'moz', 'webkit', 'o']
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
      window[vendors[x] + 'CancelRequestAnimationFrame']
  }

  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime()
      var timeToCall = Math.max(0, 16 - (currTime - lastTime))
      var id = window.setTimeout(function() { callback(currTime + timeToCall) },
        timeToCall)
      lastTime = currTime + timeToCall
      return id
    }
  }

  if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id)
    }
  }
}

function demo1() {
  var width, height, largeHeader, canvas, ctx, points, target
  var animateHeader = true
  // Main
  initHeader()
  initAnimation()
  addListeners()

  function initHeader() {
    width = window.innerWidth
    height = window.innerHeight
    target = { x: width / 2, y: height / 2 }

    largeHeader = document.getElementById('large-header')
    largeHeader.style.height = height + 'px'

    canvas = document.getElementById('demo-canvas')
    canvas.width = width
    canvas.height = height
    ctx = canvas.getContext('2d')

    // create points
    points = []
    for (var x = 0; x < width; x = x + width / 20) {
      for (var y = 0; y < height; y = y + height / 20) {
        var px = x + Math.random() * width / 20
        var py = y + Math.random() * height / 20
        var p = { x: px, originX: px, y: py, originY: py }
        points.push(p)
      }
    }

    // for each point find the 5 closest points
    for (var i = 0; i < points.length; i++) {
      var closest = []
      var p1 = points[i]
      for (var j = 0; j < points.length; j++) {
        var p2 = points[j]
        if (!(p1 === p2)) {
          var placed = false
          for (let k = 0; k < 5; k++) {
            if (!placed) {
              if (closest[k] === undefined) {
                closest[k] = p2
                placed = true
              }
            }
          }

          for (let k = 0; k < 5; k++) {
            if (!placed) {
              if (getDistance(p1, p2) < getDistance(p1, closest[k])) {
                closest[k] = p2
                placed = true
              }
            }
          }
        }
      }
      p1.closest = closest
    }

    // assign a circle to each point
    for (const i in points) {
      var c = new Circle(points[i], 2 + Math.random() * 2, 'rgba(255,255,255,0.3)')
      points[i].circle = c
    }
  }

  // Event handling
  function addListeners() {
    if (!('ontouchstart' in window)) {
      window.addEventListener('mousemove', mouseMove)
    }
    window.addEventListener('scroll', scrollCheck)
    window.addEventListener('resize', resize)
  }

  function mouseMove(e) {
    var posx = 0
    var posy = 0
    if (e.pageX || e.pageY) {
      posx = e.pageX
      posy = e.pageY
    } else if (e.clientX || e.clientY) {
      posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
      posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop
    }
    target.x = posx
    target.y = posy
  }

  function scrollCheck() {
    if (document.body.scrollTop > height) animateHeader = false
    else animateHeader = true
  }

  function resize() {
    width = window.innerWidth
    height = window.innerHeight
    largeHeader.style.height = height + 'px'
    canvas.width = width
    canvas.height = height
  }

  // animation
  function initAnimation() {
    animate()
    for (var i in points) {
      shiftPoint(points[i])
    }
  }

  function animate() {
    if (animateHeader) {
      ctx.clearRect(0, 0, width, height)
      for (var i in points) {
        // detect points in range
        if (Math.abs(getDistance(target, points[i])) < 4000) {
          points[i].active = 0.3
          points[i].circle.active = 0.6
        } else if (Math.abs(getDistance(target, points[i])) < 20000) {
          points[i].active = 0.1
          points[i].circle.active = 0.3
        } else if (Math.abs(getDistance(target, points[i])) < 40000) {
          points[i].active = 0.02
          points[i].circle.active = 0.1
        } else {
          points[i].active = 0
          points[i].circle.active = 0
        }

        drawLines(points[i])
        points[i].circle.draw()
      }
    }
    requestAnimationFrame(animate)
  }

  function shiftPoint(p) {
    TweenLite.to(p, 1 + 1 * Math.random(), {
      x: p.originX - 50 + Math.random() * 100,
      y: p.originY - 50 + Math.random() * 100,
      ease: Circ.easeInOut,
      onComplete: function() {
        shiftPoint(p)
      }
    })
  }

  // Canvas manipulation
  function drawLines(p) {
    if (!p.active) return
    for (var i in p.closest) {
      ctx.beginPath()
      ctx.moveTo(p.x, p.y)
      ctx.lineTo(p.closest[i].x, p.closest[i].y)
      ctx.strokeStyle = 'rgba(156,217,249,' + p.active + ')'
      ctx.stroke()
    }
  }

  function Circle(pos, rad, color) {
    var _this = this;

    // constructor
    (function() {
      _this.pos = pos || null
      _this.radius = rad || null
      _this.color = color || null
    })()

    this.draw = function() {
      if (!_this.active) return
      ctx.beginPath()
      ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false)
      ctx.fillStyle = 'rgba(156,217,249,' + _this.active + ')'
      ctx.fill()
    }
  }

  // Util
  function getDistance(p1, p2) {
    return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)
  }
}
export default {
  name: 'login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能小于5位'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePass }]
      },
      loading: false,
      pwdType: 'password'
    }
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.loading = false
            this.$store.state.user.isLogin = true
            this.$router.push({ path: '/' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  mounted() {
    rAF()
    demo1()
  }
}

</script>
<style rel="stylesheet/scss" lang="scss">
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#151313;

.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #fff;
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: $light_gray !important;
  }
  input {
    background-color: #fff;
    border: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    padding: 12px 5px 12px 15px;
    color: $light_gray;
    height: 47px;
  }
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
  }
  .tips {
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
    .phone {
      color: #ff4800
    }
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
    &_login {
      font-size: 20px;
    }
  }
  .title {
    font-size: 26px;
    font-weight: 400;
    color: $light_gray;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
  }
  .login-form {
    background-color: #fff;
    position: absolute;
    right: 0;
    width: 400px;
    padding: 35px 35px 15px 35px;
    margin-top: 10%;
    margin-right: 15%;
    z-index: 9;
  }
  .el-form-item {
    border: 1px solid rgba(97, 95, 95, 0.43);
    background: rgba(0, 0, 0, 0);
    border-radius: 5px;
    color: #454545;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
  .thirdparty-button {
    position: absolute;
    right: 35px;
    bottom: 28px;
  }
}

</style>
